<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/richText/bootstrap-combined.no-icons.min.css" type="text/css">
    <link rel="stylesheet" href="/richText/index.css" type="text/css"></link>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">


    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/ace.min.css">
    <link rel="stylesheet" href="css/ace-skins.min.css">
    <link rel="stylesheet" href="css/ace-responsive.min.css">
    <link rel="stylesheet" type="text/css" href="webuploader/webuploader.css" />
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="webuploader/webuploader.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootbox.min.js"></script>

    <style>
        body,html{
            width: 100%;
            height: 100%;
            background: #fff;
        }
        #editor {
            height: 200px;
        }

        #main-content {
            margin-left: 190px;
        }

        #page-content {
            margin: 0;
            background: #FFF;
            position: relative;
            top: 0%;
            left: -10%;
        }

        .modal-footer {
            background: #fff;
        }
    </style>

</head>
<body>

<div id="main-content" class="clearfix">
    <div id="page-content" class="clearfix">


        <div class="page-header position-relative">
            <h1 style="color: #2679b5;">品牌商 <small><i class="icon-double-angle-right"></i> 公司信息</small></h1>
        </div>
        <h3 style="line-height:40px;">公司信息</h3>
        <table id="table_bug_report1" class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
                <th>公司名称（中文）</th>
                <th>公司名称（英文）</th>
                <th>品牌商认证类型</th>
                <th>证书地址</th>
                <!--<th>操作</th>-->
            </tr>
            </thead>

            <tbody id="mytable">

            </tbody>
        </table>

        <h3 style="margin-top:40px;line-height:40px;">品牌信息</h3>
        <!-- 品牌信息 -->
        <table id="table_bug_report" class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
                <!--<th class="center">
                    <label><input type="checkbox" class="ace-checkbox-2"><span class="lbl"></span></label>
                </th>-->
                <th style="display: none">品牌编号</th>
                <th>品牌名称</th>
                <th>品牌图片</th>
                <th>操作</th>
            </tr>
            </thead>

            <tbody id="brandtable">

            </tbody>
        </table>
        <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="addnew" onclick="newadd()">新增</button>






        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">品牌信息</h4>
                    </div>
                    <div class="modal-body" >
                        <form class="form-horizontal">

                            <div class="control-group">
                                <label class="control-label" for="form-field-1">品牌名称<br>Brand Name</label>
                                <div class="controls">
                                    <input type="text" id="form-field-1" >
                                </div>
                            </div>

                            <div class="control-group">
                                <p class="red">(建议图片大小160*80的jpg/png格式)</p>
                                <label class="control-label" for="form-field-1">品牌图片<br>Brand Logo</label>
                                <div class="controls">
                   <span style="font-size:14px;"><div id="uploader-demo">
                  <!--用来存放item-->
                  <div id="thelist" class="uploader-list"></div>
                  <div>
                   <!--<div id="filePicker" onchange="ima()">选择图片</div>-->
					  <input type="file" name="file" id="file" class="input_text80" onchange="ima()"><br><br>
                      <!--<input type="button" value="开始上传" onclick="storeimage()" id="uplo">-->
                      <!--<button id="ctlBtn" class="btn btn-default">开始上传</button>-->
                  </div>
                  </div>
                  </span>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="add()" >添加</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var brandlist = ""
    var inde = -1;
    var isEdit = false
    var markEdit = -1
    var mvo_id
    var pic = ""


    //預加載品牌圖片的文件名
    function ima(){
        var fileName = $("#file").val();
        var strFileName = fileName.substring(fileName.lastIndexOf("\\") + 1);
        pic = strFileName
        console.log(pic)
    }

    //新增品牌清除彈出編輯框的品牌名稱
    function newadd(){
        $("#form-field-1").val(undefined)
    }


    function goEdit(){
        window.location.href = '/mvocompany?uid=' + mvo_id
    }


    //獲取用戶ID
    $(function () {

        var url=location.search;
        var Request = new Object();
        if(url.indexOf("?")!=-1){
            var str = url.substr(1)　//去掉?号
            strs = str.split("&");
            for(var i=0;i<strs.length;i++){
                Request[strs[i ].split("=")[0]]=unescape(strs[i].split("=")[1]);
            }
        }
        mvo_id = Request["uid"]
        console.log(mvo_id);
        //将需要修改信息的商品ID传到该页面
        // $("#index").attr('href','/role?uid='+mvo_id);
    })


    //進行新增或刪除操作
    function add(){

        if(isEdit == true){

            // var table = document.getElementById("brandtable")
            //  $("#form-field-1").val(table.rows[inde].cells[1].innerText)

            var brandid = markEdit

            var brandname = $("#form-field-1").val()
            // $('#brandText').val(brandname)

            if(pic.length == 0)
            {
                $.ajax({
                    type:'post',
                    url:'/brand/updateBrand',
                    data:{id:brandid ,name:brandname ,mvo_id:mvo_id},
                    dataType:'text',
                    success:function (re) {
                        alert(re)
                        window.location.reload()
                        // var $tmp = $('#butt')
                        // $tmp.html('添加')
                    },
                    error:function () {
                        alert("已存在该品牌名称，请重新输入")
                    }
                })
            }
            else(
                $.ajax({
                    type:'post',
                    url:'/brand/updateBrandWithPic',
                    data:{id:brandid ,name:brandname ,mvo_id:mvo_id , image:pic},
                    dataType:'text',
                    success:function (re) {
                        alert(re)
                        window.location.reload()
                    },
                    error:function () {
                        alert("已存在该品牌名称，请重新输入")
                    }
                })
            )


        }
        else{
            // var $tmp = $('#butt')
            // $tmp.html('添加')

            var name = $("#form-field-1").val()
            if(pic.length == 0){
                $.ajax({
                    type:'post',
                    url:'/brand/addBrand',
                    data:{name:name , mvo_id:mvo_id},
                    dataType:'text',
                    success:function (re) {
                        alert(re)
                        window.location.reload()
                    },
                    error:function () {
                        alert("已存在该品牌名称，请重新输入")
                    }
                })
            }
            else {
                $.ajax({
                    type:'post',
                    url:'/brand/insertWithPic',
                    data:{name:name , mvo_id:mvo_id , image:pic},
                    dataType:'text',
                    success:function (re) {
                        alert(re)
                        window.location.reload()
                    },
                    error:function () {
                        alert("已存在该品牌名称，请重新输入")
                    }
                })
            }

        }

        // window.parent.location.reload()
    }

    //加載表格
    $(function (){
        var $tbody=$("#brandtable");//表格
        $("#file").val('')
        $.ajax({
            type:'post',
            url:'/brand/selectBrandByUserID',
            data:{mvo_id:mvo_id},
            dataType:'json',
            success:function (brand) {
                brandlist = brand
                console.log(brand);
                var newHtml='';
                for(var i=0;i<brand.length;i++){
                    var tmp = brand[i].name
                    newHtml+='<tr>';
                    /*newHtml+='  <th class="center">';*/
                    /*newHtml+='     <label><input type="checkbox" class="input"><span class="lbl"></span></label>';*/
                    /*newHtml+='  </th>';*/
                    newHtml+='  <td id="brandID" style="display: none" >'+brand[i].id+'</td>';
                    newHtml+='  <td id="brandText">'+brand[i].name+'</td>';
                    newHtml+='  <td style="height: "><img src="image/'+'' + brand[i].image +'"  width="50px" height="50px" alt="" /></td> ';
                    newHtml+='      <td>';
                    newHtml+='      <div class="inline position-relative">';
                    newHtml+='      <button class="btn btn-mini btn-info" data-toggle="modal" data-target="#myModal" id="iconeditor" onclick="refresh('+ i +')" ><i class="icon-edit"></i></button>';
                    newHtml+='  <button class="btn btn-mini btn-danger" id="delete" onclick="dele('+ i +')" ><i class="icon-trash" ></i></button> ';
                    newHtml+='  </div>';
                    newHtml+='  </td>';
                    newHtml+='  </tr>';}
                $tbody.html(newHtml);
                document.getElementById("addnew").removeAttribute("disabled")
            },
            error:function () {
                alert("error");
            }
        })
    })

    //更新前記錄預更新訊息
    function  refresh(i) {
        var table = document.getElementById("brandtable")
        // var table = document.getElementById("brandtable")


        //  $("#form-field-1").val(table.rows[inde].cells[1].innerText)
        // alert(table.rows[inde].cells[1].innerText)



        // var brandid = table.rows[i].cells[0].innerText
        // var brandname = $("#form-field-1").val()
        // $.ajax({
        //     type:'post',
        //     url:'/updateBrand',
        //     data:{id:brandid ,name:brandname ,mvo_id:1},
        //     dataType:'text',
        //     success:function (re) {
        //         alert(re)
        //     },
        //     error:function () {
        //         alert("errorupdatebrand")
        //     }
        // })
        isEdit = true
        console.log(isEdit)
        markEdit = table.rows[i].cells[0].innerText

        // console.log(table.rows[inde].cells[1].innerText)
        inde = i
        $("#form-field-1").val(table.rows[i].cells[1].innerText)
        // var fileName = $("#file").val();
        // var strFileName = fileName.substring(fileName.lastIndexOf("\\") + 1);
        // pic = strFileName
        // console.log(markEdit)
        pic = brandlist[i].image
        console.log(brandlist[i].name , brandlist[i].image)
    }

    function dele(i){
        var table = document.getElementById("brandtable")
        var brandname = table.rows[i].cells[1].innerText
        var t = confirm("确认删除品牌"   +  brandname + "?"  )
        if(t == true){
            $.ajax({
                type:'post',
                url:'/brand/deleteByName',
                data:{name:brandname},
                dataType:'text',
                success:function (re) {
                    console.log(brandname)
                    alert(re)
                    window.location.reload()
                },
                error:function () {
                    alert("error")
                    window.location.reload()
                }
            })

        }

        else return

    }

    //加载公司讯息
    $(function(){
        var $tbody=$("#mytable");//表格
        $.ajax({
            type:'post',
            url:'/user/selectCompanyByUid',
            data:{id:mvo_id},
            dataType:'json',
            success:function (company) {
                console.log(company);
                var newHtml='';
                newHtml+='<tr>';
                newHtml+='  <td>'+company.chineseName+'</td>';
                newHtml+='  <td>'+company.englishName+'</td>';
                newHtml+='  <td>'+company.reportType+'</td>';
                newHtml+='  <td>'+company.repportUrl+'</td>';
                /*newHtml+='  <td> ';
                newHtml+='      <div class="inline position-relative">';
                newHtml+='        <button class="btn btn-mini btn-info" onclick="goEdit()"><i class="icon-edit"></i></button>';
                newHtml+='      </div>';
                newHtml+='  </td> ';*/
                newHtml+='</tr>';
                $tbody.html(newHtml);
            },
            error:function () {
                // alert("请先录入公司讯息");
                document.getElementById("addnew").setAttribute("disabled" ,true)
            }
        })
    })


    $(function(){
        /*init webuploader*/
        var $list=$("#thelist");   //这几个初始化全局的百度文档上没说明，好蛋疼。
        var $btn =$("#ctlBtn");   //开始上传
        var thumbnailWidth = 100;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档
        var thumbnailHeight = 100;

        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: false,

            // swf文件路径
            swf: '${ctxStatic }/webupload/Uploader.swf',

            // 文件接收服务端。
            server: '/apm-web/a/test/',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',

            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },
            method:'POST',
        });
        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {  // webuploader事件.当选择文件后，文件被加载到文件队列中，触发该事件。等效于 uploader.onFileueued = function(file){...} ，类似js的事件定义。
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
                $img = $li.find('img');


            // $list为容器jQuery实例
            $list.append( $li );

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb( file, function( error, src ) {   //webuploader方法
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress span');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<p class="progress"><span></span></p>')
                    .appendTo( $li )
                    .find('span');
            }

            $percent.css( 'width', percentage * 100 + '%' );
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file ) {
            $( '#'+file.id ).addClass('upload-state-done');
        });

        // 文件上传失败，显示上传出错。
        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');

            // 避免重复创建
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').remove();
        });
        $btn.on( 'click', function() {
            console.log("上传...");
            uploader.upload();
            console.log("上传成功");
        });



        $('.btn-danger').click(function(){
            bootbox.alert("删除成功")
        })
        $('.ace-checkbox-2').change(function(){
            if($('.ace-checkbox-2').prop('checked')){
                $('.input').prop('checked',true);
            }else{
                $('.input').prop('checked',false);
            }
        })


    });

</script>
</body>
</html>
